<!-- 行业标签榜 -->
<template>
  <div style="padding: 20px">
    <div style="display: flex; justify-content: space-between">
      <span>
        <el-radio-group v-model="searchPeriod">
          <el-radio-button label="日榜"></el-radio-button>
          <el-radio-button label="周榜"></el-radio-button>
          <el-radio-button label="月榜"></el-radio-button>
        </el-radio-group>
        <el-select v-model="periodValue" placeholder="请选择">
          <el-option
            v-for="item in periodValueOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input style="width: 300px"></el-input>
        <el-button>搜索</el-button>
        <el-button>导出</el-button>
      </span>
      <span> 更新时间：{{ lastUpdateTimeStr }} </span>
    </div>
    <div class="margin-top-20">
      分类：
      <el-radio-group v-model="classify">
        <el-radio-button
          v-for="(item, key) in classifyOptions"
          :label="item"
          :key="key"
        ></el-radio-button>
      </el-radio-group>
    </div>
    <!-- 显示结果 -->
    <div class="margin-top-20">
      <el-radio-group v-model="pageOrder">
        <el-radio-button
          v-for="(item, key) in pageOrderOptions"
          :label="item"
          :key="key"
        ></el-radio-button>
      </el-radio-group>
    </div>
    <paged-result />
  </div>
</template>

<script>
import PagedResult from "./components/PagedResult.vue";

export default {
  name: "",
  data: function () {
    return {
      lastUpdateTimeStr: "2020年2月2日 04:04:04:04",
      searchPeriod: "日榜",
      periodValue: "0530",
      classify: "全部",
      pageOrder: "播放量最多",
      periodValueOptions: [{ label: "5月30日", value: "0530" }],
      classifyOptions: [
        "全部",
        "时尚",
        "生活",
        "美食",
        "动画",
        "音乐",
        "舞蹈",
        "游戏",
        "知识",
        "数码",
        "资讯",
        "鬼畜",
        "广告",
        "娱乐",
        "影视",
        "番剧",
        "国创",
        "纪录片",
        "电影",
        "电视剧",
        "相声",
        "特摄",
        "体育",
        "星海",
      ],
      pageOrderOptions: [
        "播放量最多",
        "关联视频量最多",
        "播放总量最多",
        "视频总量最多",
        "订阅最多",
      ],
    };
  },

  components: { PagedResult },

  computed: {},

  mounted: function () {},

  methods: {},
};
</script>
<style lang="scss" scoped></style>
